<template>
  <div class="match-wrap">
    <!-- 题目说明 -->
    <div class="title" v-html="title"></div>

    <!-- 火柴盒的使用提示 -->
    <div class="tip">{{ tip }}</div>
    <!-- 拿取火柴的手 -->
    <div
      v-show="down"
      @mousemove="mouseMove($event)"
      @mouseup="mouseUp($event)"
    >
      <img
        draggable="false"
        :style="{ top: moveTop + 'px', left: moveLeft + 'px' }"
        src="/static/ass02/catchMatch.png"
        style="height: 60px; width: 60px; position: absolute; z-index: 3"
      />
    </div>
    <!-- 火柴盒 -->
    <div @mousedown="mouseDownbox($event)">
      <img src="/static/ass02/matchBox.png" class="match-box" ref="mb" />
    </div>
    <!-- 火柴图形 -->
    <div
      class="match-group"
      ref="mg"
      :style="{ width: matchGroupWidth + 'px', height: matchGroupHeight + 'px'  }"
    >
      <!-- 第二题中的A标识 -->
      <div class="sign" v-show="showA">A</div>
      <!-- 全部可放置的位置 -->
      <div v-for="(item, i) in matchAll" :key="i">
        <img
          class="match"
          :style="{
            top: item.top + 'px',
            left: item.left + 'px',
            transform: 'rotate(' + item.angle + 'deg)',
          }"
          src="/static/ass02/matchgreyV.png"
        />
      </div>

      <!-- 已经有火柴放置的位置 -->
      <div v-for="(item, i) in matchInit" :key="i">
        <div @mousedown="mouseDown($event)">
          <!-- 
            draggable:解决拖动时出现禁止图标的问题
            class:水平或垂直方向对应不同的宽高样式
            style:使用绝对定位top, left确定火柴的位置
            src:水平或垂直方向对应不同的图片 -->
          <img
            draggable="false"
            class="match"
            :style="{
              top: item.top + 'px',
              left: item.left + 'px',
              transform: 'rotate(' + item.angle + 'deg)',
            }"
            src="/static/ass02/matchV.png"
          />
        </div>
      </div>
    </div>
    <el-button @click="submit" type="primary" style="margin-bottom:20px">提交</el-button>

    <el-button @click="next">跳过</el-button>
  </div>
</template>

<script>
export default {
  name: "match",
  data() {
    return {
      tip: "左侧火柴盒可拿取或放回火柴",
      //拿取手势相关
      down: false,
      moveTop: 0,
      moveLeft: 0,
      //游戏结果是否成功
      result: false,
    };
  },
  props: {
    // 题目说明
    title: { type: String, default: "火柴游戏" },
    // 所有可以放置火柴的位置
    matchAll: { type: [] },
    // 初始火柴放置的位置
    matchInit: { type: [] },
    // 成功游戏时火柴的放置情况
    matchSuc: { type: [] },
    // 游戏主体图形的宽度
    matchGroupWidth: { type: Number, default: 500 },
    // 游戏主体图形的高度
    matchGroupHeight: { type: Number, default: 360 },
    // 第二题中的A标识
    showA: { type: Boolean, default: false },
  },

  methods: {
    // 鼠标按下火柴盒
    mouseDownbox(e) {
      // 记录鼠标拖动开始的位置
      this.startPageX = e.pageX;
      this.startPageY = e.pageY;

      // 鼠标按下=>拿取手势图标出现
      this.down = true;

      // 设置拿取手势图标的位置
      this.moveTop = e.pageY - 30;
      this.moveLeft = e.pageX - 30;
      // 记录拿取手势图标拖动前的位置
      this.startTranX = this.moveLeft;
      this.startTranY = this.moveTop;
    },

    // 鼠标按下火柴
    mouseDown(e) {
      console.log("鼠标按下");
      console.log(e);

      // 当前选中的火柴
      let target = e.target;

      // 当前选中火柴
      let tLeft = target.offsetLeft;
      let tTop = target.offsetTop;

      //从数组中删除现在选中的火柴
      for (var i = 0; i < this.matchInit.length; i++) {
        if (this.matchInit[i].left == tLeft && this.matchInit[i].top == tTop) {
          this.delete = this.matchInit[i];
          this.matchInit.splice(i, 1);
          // i--; //如果需要删除两个以上元素
        }
      }

      // 记录鼠标拖动开始的位置
      this.startPageX = e.pageX;
      this.startPageY = e.pageY;

      // 鼠标按下=>拿取手势图标出现
      this.down = true;

      // 设置拿取手势图标的位置
      this.moveTop = e.pageY - 30;
      this.moveLeft = e.pageX - 30;
      // 记录拿取手势图标拖动前的位置
      this.startTranX = this.moveLeft;
      this.startTranY = this.moveTop;
    },

    //拿取手势图标移动
    mouseMove(e) {
      if (this.down) {
        // 拿取手势图标
        let target = e.target;

        // 设置鼠标移动的距离
        let offsetPageX = e.pageX - this.startPageX;
        let offsetPageY = e.pageY - this.startPageY;

        // 计算手势拿取图标的位置
        let tranX = parseFloat(this.startTranX) + parseFloat(offsetPageX);
        let tranY = parseFloat(this.startTranY) + parseFloat(offsetPageY);
        target.style.left = tranX + "px";
        target.style.top = tranY + "px";
      }
    },

    // 松开鼠标
    mouseUp(e) {
      let target = e.target;
      if (!this.autoMove(target)) {
        // 提示警告信息
        this.$message({
          message: "请将火柴移至合适的位置(移动火柴时请尽量对齐火柴头)",
          type: "warning",
        });
      }
      this.down = false;
    },
    // 判断火柴是否去到了火柴盒或者待入的位置
    autoMove(target) {
      // 检查是否移动至火柴盒处
      if (
        Math.abs(target.offsetTop - this.$refs.mb.offsetTop - 50) < 50 &&
        Math.abs(target.offsetLeft - this.$refs.mb.offsetLeft - 40) < 50
      ) {
        return true;
      }
      //减去match-group的offset值
      let ttTop = target.offsetTop - this.$refs.mg.offsetTop;
      let ttLeft = target.offsetLeft - this.$refs.mg.offsetLeft;
      let matchTran = JSON.parse(JSON.stringify(this.matchAll));
      matchTran = matchTran.map((item) => {
        if (item.angle == 90) {
          item.top += 35;
          item.left += 50;
        } else if (item.angle == -90) {
          item.top += 35;
          item.left -= 35;
        } else if (item.angle == 45) {
          item.left += 35;
          item.top += 10;
        } else if (item.angle == -45) {
          item.left -= 25;
          item.top += 10;
        } else if (item.angle == 60) {
          item.left += 30;
          item.top += 20;
        } else if (item.angle == -60) {
          item.left -= 30;
          item.top += 20;
        } else if (item.angle == 120) {
          item.left += 40;
          item.top += 55;
        } else if (item.angle == -120) {
          item.left -= 30;
          item.top += 45;
        } else {
        }
        return item;
      });
      for (let i = 0; i < matchTran.length; i++) {
        if (
          Math.abs(matchTran[i].top - ttTop) < 10 &&
          Math.abs(matchTran[i].left - ttLeft) < 10
        ) {
          //需要判断一下是否有火柴在这里了
          let inMatch = this.matchInit.some((item) => {
            if (
              item.top == this.matchAll[i].top &&
              item.left == this.matchAll[i].left
            ) {
              return true;
            }
          });
          if (inMatch) {
            this.matchInit.push(this.delete);
            this.moveTop = 0;
            this.moveLeft = 0;
            return false;
          }
          this.matchInit.push(this.matchAll[i]);
          this.moveTop = 0;
          this.moveLeft = 0;
          return true;
        }
      }
      this.matchInit.push(this.delete);
      this.moveTop = 0;
      this.moveLeft = 0;
      return false;
    },
    // 为了消除拿取手势图标
    mouseUpAll(e) {
      this.down = false;
    },
    //数组排序规则函数
    sortBy(field1, field2) {
      return function (a, b) {
        if (a.top == b.top) return a.left - b.left;
        return a.top - b.top;
      };
    },
    // 点击提交按钮
    submit() {
      //判断matchInit和matchSuc是否相等
      if (this.matchInit.length == this.matchSuc.length) {
        this.matchInit.sort(this.sortBy("top", "left"));
        this.matchSuc.sort(this.sortBy("top", "left"));
        this.result =
          JSON.stringify(this.matchInit) == JSON.stringify(this.matchSuc);
      // this.$message({
      //   message: "恭喜，回答正确！",
      //   type: "success",
      // });
      }
      this.next();
    },
    next() {
      let data = {
        result: this.result,
        next: true,
      };
      this.$emit("nextQuestion", data);
    },
  },
};
</script>

<style scoped lang="less">
@matchLength: 100px;
@matchWidth: 30px;
.match-wrap {
  .title {
    font-size: 25px;
    height: 80px;
    margin: auto;
    line-height: 40px;
  }
  .tip {
    font-size: 15px;
    height: 40px;
    margin: auto;
    line-height: 20px;
  }
  .match-box {
    height: 100px;
    width: 100px;
    position: absolute;
    z-index: 2;
    top: 101px;
    left: 81px;
  }
  .match-group {
    height: 360px;
    margin: auto;
    position: relative;
    .match {
      position: absolute;
      width: @matchWidth;
      height: @matchLength;
    }
    .sign {
      position: absolute;
      top: 90px;
      left: 300px;
      font-size: 40px;
      z-index: 4;
    }
  }
}
</style>